<template>
	<view class="goods_list_com">
		<!-- 一行一个 -->
		<view
			class="goods_list_1"
			v-if="type == 4"
			:style="size === 'mini' ? 'padding: 0' : ''"
		>
			<view class="body" v-for="item in value" :key="item.id">
				<u-gap height="8"></u-gap>
				<view class="goods-item" @click="itemTo(item)">
					<view class="goods_img">
						<u-image
							width="162"
							height="162"
							:src="item.goodsPicUrl"
							bg-color="#fff"
						></u-image>
					</view>
					<view class="goods_info">
						<view class="goods_name u-line-2">
							{{ item.goodsName || item.commonName }}
						</view>
						<view>
							<view class="demo-tag-owner" :style="{background:(item.deliveryMode === 0 ? '#E0EBFF' : item.deliveryMode === 1 ? '#FEE7E1' : '#FFEEE0')}">
								<span v-if="item.deliveryMode === 1" style="color:#DF3C0A">{{ $t('locales.Bonded') }}</span>
								<span v-if="item.deliveryMode === 0" style="color:#416BB5">{{ $t('locales.directmail') }}</span>
								<span v-if="item.deliveryMode === 2" style="color:#95642C">{{ $t('locales.stocking') }}</span>
							</view>
						</view>
						<view class="goods_prc">
							<template>
								<text v-if="item.isNormalPrice" style="color: #FF1010">{{$store.getters.currency}}</text>
								<text class="prc">{{ item.buyPrice }}</text>
								<!-- <text class="rm_prc" v-if="size != 'mini'">
									{{ item.marketPrice }}
								</text> -->
							</template>
							<!-- <template v-else>
								<text class="prc_null_login">
									{{ $t('locales.visibleLogin') }}
								</text>
							</template> -->
						</view>
					</view>
				</view>
				<u-gap height="8"></u-gap>
			</view>
			<view
				class="morestyle"
				@click="loadmore()"
				v-if="loadstatus != '' && more && value.length > 6"
			>
				<!-- <BottomLine /> -->
				{{ loadstatus }}
			</view>
		</view>
		<!-- 一行两个 -->
		<view class="goods_list_2" v-if="type == 2">
			<view class="body" v-for="item in moreList" :key="item.goodsId">
				<u-gap height="8"></u-gap>
				<view class="goods-item" @click="itemTo(item)">
					<view class="goods_img">
						<u-image
							width="100%"
							height="350rpx"
							:src="item.goodsPicUrl"
							bg-color="#fff"
						></u-image>
					</view>
					<view class="goods_name u-line-2">
						{{ item.goodsName }}
					</view>
					<view>
						<view class="demo-tag demo-tag-owner" :style="{background:(item.deliveryMode === 0 ? '#E0EBFF' : item.deliveryMode === 1 ? '#FEE7E1' : '#FFEEE0')}">
							<span v-if="item.deliveryMode === 1" style="color:#DF3C0A">{{ $t('locales.Bonded') }}</span>
							<span v-if="item.deliveryMode === 0" style="color:#416BB5">{{ $t('locales.directmail') }}</span>
							<span v-if="item.deliveryMode === 2" style="color:#95642C">{{ $t('locales.stocking') }}</span>
						</view>
					</view>
					<template>
						<view class="goods_prc">
							<text v-if="item.isNormalPrice" style="color: #FF1010">{{$store.getters.currency}}</text>
							<text class="prc">{{ item.buyPrice }}</text>
							<!-- <text class="rm_prc">{{ item.marketPrice }}</text> -->
						</view>
					</template>
					<!-- <template v-else>
						<view class="prc_null_login">{{ $t('locales.visibleLogin') }}</view>
					</template> -->
				</view>
				<u-gap height="8"></u-gap>
			</view>
			<view
				class="morestyle"
				@click="loadmore()"
				v-if="loadstatus != '' && more && value.length > 6"
			>
				<!-- <BottomLine /> -->
				{{ loadstatus }}
			</view>
		</view>
		<!-- 一行三个 -->
		<view v-if="type == 3">
			<view class="goods_list_3">
				<view class="body" v-for="item in moreList" :key="item.goodsId">
					<u-gap height="8"></u-gap>
					<view class="goods_item" @click="itemTo(item)">
						<view class="goods_img">
							<u-image
								width="100%"
								height="223.3"
								:src="item.goodsPicUrl"
								bg-color="#fff"
							></u-image>
						</view>
						<view class="goods_name u-line-2">
							{{ item.goodsName }}
						</view>
						<view class="goods_prc">
							<view class="prc">
								<text v-if="item.isNormalPrice">{{$store.getters.currency}}</text>
								{{ item.buyPrice }}
							</view>
							<!-- <view class="rm_prc">{{ item.marketPrice }}</view> -->
						</view>
					</view>
					<u-gap height="8"></u-gap>
				</view>
			</view>
			<view
				class="morestyle"
				@click="loadmore()"
				v-if="loadstatus != '' && more && value.length > 6"
			>
				<!-- <BottomLine /> -->
				{{ loadstatus }}
			</view>
		</view>
		<!-- 一行四个 -->
		<view class="goods_list_4" v-if="type == 8">
			<view class="body" v-for="item in value" :key="item.goodsId">
				<u-gap height="8"></u-gap>
				<view class="goods_item" @click="itemTo(item)">
					<view class="goods_img">
						<u-image
							width="100%"
							height="163.5"
							:src="item.goodsPicUrl"
							bg-color="#fff"
						></u-image>
					</view>
					<view class="goods_prc">
						<view class="prc">
							<text v-if="item.isNormalPrice">{{$store.getters.currency}}</text>
							{{ item.buyPrice }}
						</view>
						<!-- <view class="rm_prc">{{ item.marketPrice }}</view> -->
					</view>
				</view>
				<u-gap height="8"></u-gap>
			</view>
		</view>
		<!-- 滑动 -->
		<view class="goods_list_5" v-if="type == 5">
			<u-gap height="8"></u-gap>
			<view class="scroll_view">
				<view
					class="goods_item"
					v-for="item in moreList"
					:key="item.goodsId"
					@click="itemTo(item)"
				>
					<view class="goods_img">
						<u-image
							width="100%"
							height="136"
							:src="item.goodsPicUrl"
							bg-color="#fff"
						></u-image>
					</view>
					<view class="goods_prc">
						<view class="prc">
							<text v-if="item.isNormalPrice">{{$store.getters.currency}}</text>
							{{ item.buyPrice }}
						</view>
						<!-- <view class="rm_prc">{{ item.marketPrice }}</view> -->
					</view>
				</view>
				<view class="more" @click="loadmore()">
					{{ $t('locales.more') }}
					<!-- <BottomLine /> -->
				</view>
			</view>
			<u-gap height="8"></u-gap>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		type: {
			type: [String, Number],
			default: 2
		},
		size: {
			type: String,
			default: ''
		},
		more: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			list: 9,
			moreList: [],
			number: 6,
			loadstatus: this.$t('locales.loadMore')
		}
	},
	watch: {
		value(val) {
			if (this.more) {
				this.moreList = this.value.slice(0, this.number)
			} else {
				this.moreList = val
			}
		}
	},
	methods: {
		itemTo(row) {
			uni.navigateTo({
				url: '/pages/productDetails/index?id=' + row.goodsId
			})
		},
		// 点击加载更多
		loadmore() {
			this.number = this.number + 6
			let data = this.value.slice(0, this.number)
			this.moreList = data
			if (this.moreList.length === this.value.length) {
				this.loadstatus = ''
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.goods_list_com {
	.goods_list_1 {
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #f7f4f8;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.body {
		}
		.goods-item {
			background-color: #fff;
			width: calc(100%);
			box-sizing: border-box;
			border-radius: 16rpx;
			display: flex;
			padding: 24rpx;
			.goods_img {
				border-radius: 8px;
				overflow: hidden;
				width: 162rpx;
				height: 162rpx;
			}
			.goods_info {
				flex: 1;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.goods_name {
					font-size: 24rpx;
				}
				.goods_msg {
					.mgs_item {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #555;
						.mgs_font {
							border: 2rpx solid #dfdfdf;
							border-radius: 5rpx;
							padding: 0 3rpx;
							height: 30rpx;
							text-align: center;
							line-height: 30rpx;
							margin-right: 8rpx;
							background-color: #f9f9f9;
						}
					}
				}
				.goods_prc {
					font-size: 20rpx;
					.prc {
						font-size: 34rpx;
						font-weight: 500;
						color: #ff1010;
					}
					.prc_null_login {
						font-size: 26rpx;
						font-weight: 400;
						color: #ff2959;
					}
					.rm_prc {
						display: inline-block;
						margin-left: 15rpx;
						font-weight: 400;
						text-decoration: line-through;
						color: #7f7f95;
					}
				}
			}
		}
	}
	.goods_list_2 {
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #f7f4f8;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.body {
			width: calc(50% - 8rpx);
			.goods-item {
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 16rpx;
				overflow: hidden;
				.goods_img {
					width: 100%;
					height: 350rpx;
				}
				.goods_msg {
					margin: 20rpx 15rpx 10rpx 15rpx;
					.mgs_item {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #555;
						.mgs_font {
							border: 2rpx solid #dfdfdf;
							border-radius: 5rpx;
							height: 30rpx;
							padding: 0 3rpx;
							text-align: center;
							line-height: 30rpx;
							margin-right: 8rpx;
							background-color: #f9f9f9;
						}
					}
				}
				.goods_name {
					margin: 20rpx 15rpx 10rpx 15rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					height: 60rpx;
				}
				.goods_prc {
					margin: 0 15rpx 20rpx 15rpx;
					font-size: 20rpx;
					.prc {
						font-size: 34rpx;
						font-weight: 500;
						color: #ff1010;
					}
					.rm_prc {
						display: inline-block;
						margin-left: 15rpx;
						font-weight: 400;
						text-decoration: line-through;
						color: #7f7f95;
					}
				}
				.prc_null_login {
					font-size: 26rpx;
					font-weight: 400;
					color: #ff2959;
					margin: 0 15rpx 20rpx 15rpx;
				}
			}
		}
	}
	.goods_list_3 {
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #f7f4f8;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.body {
			width: calc(100% / 3 - 32rpx / 3);
			.goods_item {
				overflow: hidden;
				border-radius: 16rpx;
				background-color: #fff;
				.goods_img {
					width: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}
				.goods_name {
					height: 80rpx;
					padding: 8rpx 6rpx;
					font-size: 24rpx;
					color: #000;
				}
				.goods_prc {
					padding: 9rpx 12rpx;
					.prc {
						// text-align: center;
						line-height: 34rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #ff1010;
					}
					.prc_null_login {
						font-size: 26rpx;
						font-weight: 400;
						color: #ff2959;
					}
					.rm_prc {
						// text-align: center;
						line-height: 24rpx;
						font-size: 20rpx;
						text-decoration: line-through;
						color: #7f7f95;
					}
				}
			}
		}
	}
	.goods_list_4 {
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #f7f4f8;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.body {
			width: calc(25% - 12rpx);
			.goods_item {
				overflow: hidden;
				border-radius: 16rpx;

				background-color: #fff;
				.goods_img {
					width: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}
				.goods_prc {
					padding: 15rpx 0;
					.prc {
						text-align: center;
						line-height: 34rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #ff1010;
					}
					.prc_null_login {
						font-size: 26rpx;
						font-weight: 400;
						color: #ff2959;
					}
					.rm_prc {
						text-align: center;
						line-height: 24rpx;
						font-size: 20rpx;
						text-decoration: line-through;
						color: #7f7f95;
					}
				}
			}
		}
	}
	.goods_list_5 {
		margin: 0 24rpx;
		background-color: #f7f4f8;
		overflow-x: scroll;
		width: calc(100% - 48rpx);
		border-radius: 16rpx;
		.scroll_view {
			display: flex;
			.goods_item {
				flex-shrink: 0;
				overflow: hidden;
				border-radius: 16rpx;
				width: 136rpx;
				background-color: #fff;
				margin-right: 16rpx;
				.goods_img {
					width: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}
				.goods_prc {
					padding: 15rpx 0;
					.prc {
						text-align: center;
						line-height: 34rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #ff1010;
					}
					.prc_null_login {
						font-size: 26rpx;
						font-weight: 400;
						color: #ff2959;
					}
					.rm_prc {
						text-align: center;
						line-height: 24rpx;
						font-size: 20rpx;
						text-decoration: line-through;
						color: #7f7f95;
					}
				}
			}
			.more {
				background-color: #fff;
				padding: 20rpx;
				font-size: 24rpx;
				width: 64rpx;
				display: flex;
				align-items: center;
			}
		}
	}
	.morestyle {
		margin: 0 auto;
		width: 300rpx;
		text-align: center;
		color: #888888;
	}
}
	.demo-tag-owner {
		width: max-content;
		padding: 6rpx 18rpx;	
		border-radius: 20rpx;
		font-size: 26rpx;
		line-height: 1;
		span {
			width: auto;
		}

	}

	.demo-tag {
		margin: 5px 7px
	}
</style>
